<template>
    <div class="con">
        <div class="header">
            <select name id class="fl" @change="way(chooseway)" v-model="chooseway">
                <option value="0">全部收款</option>
                <option value="1">信用卡收款</option>
                <!-- <img src="../../assets/images/my/xiala.png" alt="" class="xiala1"> -->
            </select>

            <p class="fr" @click="choosedate()" v-if="startTime==undefined">
                <span>全部日期</span>
            </p>
            <p class="fr" @click="choosedate()" v-else style="line-height:25px">
                <span>{{this.startTime}}</span>
                <br>
                <span>{{this.endTime}}</span>
            </p>
        </div>

        <div v-for="(item,index) in data" :key="index">
            <div class="title">
                <span class="fl">{{item.month}}</span>
                <span class="fr">到账金额：{{item.totalAmount}}</span>
            </div>
            <ul>
                <li v-for="(item1,index) in item.data" :key="index" @click="detail(item1.orderNo)">
                    <span class="time">
                        {{item1.tradeDate}}
                        <br>
                        {{item1.weekDay}}
                    </span>
                    <img src="../../assets/images/xykicon.png" alt>
                    <b>{{item1.orderAmount}}</b>
                    <p class="fr tip" v-if="item1.status==1">
                        <span>{{item1.statusText}}</span>
                        <br>
                        <span>{{item1.actualAmount}}</span>
                    </p>
                    <p v-else class="fr tip" style="margin-top:34px">
                        <span>{{item1.statusText}}</span>
                    </p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "tradeRecord",
    data() {
        return {
            data: {},
            timestamp: "",
            startTime: "",
            endTime: "",
            chooseway: 0
        };
    },
    methods: {
        choosedate() {
            this.$router.push({ name: "choosedate" });
        },
        way(num) {
            console.log(num);
            this.select();
            this.startTime = undefined;
        },
        detail(orderNo) {
            console.log(orderNo);
            this.$router.push({
                name: "tradedetail",
                params: { orderNo: orderNo }
            });
        },

        select(start, end) {
            console.log(start, end);
            this.axios({
                method: "post",
                headers: { token: localStorage.getItem("token") },
                url: `${
                    this.siteUrl
                }/app/transaction/getOrderList?appid=web.2019&format=json&timestamp=${
                    this.timestamp
                }`,
                data: {
                    userId: localStorage.getItem("userId"),
                    startDate: start,
                    pageNum: 1,
                    endDate: end
                }
            })
                .then(response => {
                    console.log(response);
                    if (response.data.success == 1) {
                        this.data = response.data.data;
                    } else {
                        this.$toast(response.data.message);
                    }
                })
                .catch(error => {
                    console.log(error);
                    this.$toast("连接服务器异常");
                });
        }
    },
    mounted() {
        this.timestamp = Date.parse(new Date());
        this.startTime = this.$route.params.startTime;

        this.endTime = this.$route.params.endTime;

        if (this.startTime == undefined) {
            this.select("", "");
            console.log(1);
        } else {
            this.select(
                `${this.startTime} 00:00:00`,
                `${this.endTime} 23:59:59`
            );
            console.log(2);
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
    background: #f9f9f9;
}
.con .header {
    background: #fff;
    height: 50px;
    text-align: center;
}
.con .header select {
    line-height: 50px;
    margin-left: 25%;
    transform: translateX(-25%);
    background: #fff;
}
.con .header p {
    width: 50%;
    line-height: 50px;
}
.con .title {
    height: 50px;
    line-height: 50px;
}
.con .title span {
    padding-left: 15px;
    padding-right: 15px;
    color: #a6a9b5;
    font-size: 12px;
    font-weight: 200;
}
.con ul {
    width: 100%;
    background: #fff;
}
.con li {
    height: 82px;

    position: relative;
    border-bottom: 1px solid #ececec;
    width: 94%;
    margin-left: 3%;
}
.con li:last-child {
    border: none;
}
.con li span {
    color: #a6a9b5;
    font-weight: 200;
}
.con li .time {
    position: absolute;
    left: 24px;
    top: 24px;
}
.con li img {
    width: 22px;
    height: 22px;
    position: absolute;
    top: 30px;
    left: 85px;
}
.con li b {
    position: absolute;
    top: 25px;
    left: 120px;
    font-size: 24px;
}
.con li .tip {
    font-size: 12px;
    margin-top: 28px;
    text-align: right;
    margin-right: 10px;
}
</style>
